<template>
  <div style="display:flex;height:100vh;flex-direction:column;background-color:#eee;">

    <div style="display: flex;justify-content:space-between;background-color: white;padding-bottom: 10px;margin-top:10px;"
         @click="userInfoSettingHandle">
      <div style="display: flex;margin-top: 25px;margin-left: 10px;">
        <div><img :src="user.avatar"
               class="img" /></div>
        <div style="margin-left: 10px">
          <div style="text-align:left;">{{user.nickName}}</div>
          <div style="font-size:11px;margin-top:10px;color: grey;">完善信息，让客户找到你</div>
        </div>
      </div>
      <div style="margin-top: 25px;margin-right: 10px;">
        <img :src="user.qrCode"
             class="image" />
        <img src="https://ssl-oss.raiseinfo.cn/upload/20190626/1706391125a60a.png"
             class="image"
             v-if="user.qrCode === '' " />
      </div>
    </div>

    <van-cell class="cellClass"
              title="品牌"
              @click="brandHandle"
              :value="brand">
      <div slot="label"
           style="width:150%;font-size:0.9em">一定要设置品牌（公司简介），获取相关推荐</div>
    </van-cell>

    <van-cell class="cellClass"
              @click="collectionListHandle"
              title="收藏"
              :value="collection" />

    <van-cell class="cellClass"
              title="我推荐的人"
              @click="referencesHandle"
              :value="peopleLength" />

    <van-cell class="cellClass"
              @click="pushSettingHandle"
              title="消息推送设置" />
    <div style="display:flex;flex:1;background-color: white;justify-content:center;align-items:flex-end;">
      <div style="font-size:10px;margin-bottom:10px;">
        {{user.createTime}} 加入润皓分享
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      collection: 20,
      brand: '润皓科技',
      peopleLength: 10,

      user: {
        avatar: 'https://ssl-oss.raiseinfo.cn/upload/20190626/1706391125a60a.png',
        nickName: 'Test',
        qrCode: 'https://ssl-oss.raiseinfo.cn/upload/20190626/1706391125a60a.png',
        createTime: '2019-10-10'
      }
    }
  },
  mounted () {

  },
  methods: {
    userInfoSettingHandle () {

    },
    brandHandle () {

    },
    collectionListHandle () {

    },
    referencesHandle () {

    },
    pushSettingHandle () {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cellClass {
  margin-top: 10px;
}
.img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.image {
  width: 50px;
  height: 50px;
}
</style>
